// src/app/(pages)/autocomplete/page.tsx
'use client';

import React from 'react';
import AsyncAutocomplete from '../../component/AsyncAutocomplete';

const AutocompleteDemoPage = () => {
  // Custom fetch function with mock data
  const mockFetchResults = async (term: string): Promise<{ id: number; name: string; desc: string }[]> => {
    // Simulate API delay
    await new Promise(resolve => setTimeout(resolve, 300));
    
    // Mock dataset
    const allData = [
      { id: 1, name: 'Apple', desc: 'A crisp fruit' },
      { id: 2, name: 'Banana', desc: 'A tropical fruit' },
      { id: 3, name: 'Carrot', desc: 'An orange vegetable' },
      { id: 4, name: 'Date', desc: 'A sweet fruit' },
      { id: 5, name: 'Eggplant', desc: 'A purple vegetable' },
      { id: 6, name: 'Fig', desc: 'A Mediterranean fruit' },
      { id: 7, name: 'Grape', desc: 'A small juicy fruit' },
      { id: 8, name: 'Hazelnut', desc: 'A type of nut' },
      { id: 9, name: 'Iceberg Lettuce', desc: 'A type of lettuce' },
      { id: 10, name: 'Jackfruit', desc: 'A large tropical fruit' },
    ];
    
    // Filter results based on search term
    return allData.filter(item => 
      item.name.toLowerCase().includes(term.toLowerCase()) ||
      item.desc.toLowerCase().includes(term.toLowerCase())
    );
  };

  // Custom sorting function (alphabetical by description)
  const sortByDescription = (options: { id: number; name: string; desc: string }[]) => {
    return [...options].sort((a, b) => a.desc.localeCompare(b.desc));
  };

  // Custom abort function (abort if search term is "cancel")
  const shouldCancelRequest = async (term: string): Promise<boolean> => {
    return term.toLowerCase() === 'cancel';
  };

  // Custom render option with enhanced styling
  const customRenderOption = (props: React.HTMLAttributes<HTMLLIElement>, option: { id: number; name: string; desc: string }) => (
    <li {...props} key={option.id} style={{ 
      display: 'flex', 
      flexDirection: 'column',
      padding: '10px 16px',
      borderBottom: '1px solid #eee'
    }}>
      <div style={{ 
        display: 'flex', 
        alignItems: 'center' 
      }}>
        <div style={{
          width: '24px',
          height: '24px',
          borderRadius: '50%',
          backgroundColor: '#2196f3',
          color: 'white',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '12px'
        }}>
          {option.name.charAt(0)}
        </div>
        <strong>{option.name}</strong>
      </div>
      <div style={{ 
        marginLeft: '36px', 
        fontSize: '0.85em', 
        color: '#666',
        marginTop: '4px'
      }}>
        {option.desc}
      </div>
    </li>
  );

  return (
    <div style={{ 
      maxWidth: '900px', 
      margin: '0 auto', 
      padding: '2rem',
      backgroundColor: '#f9f9f9',
      color: "black",
      fontFamily: 'sans-serif'
    }}>
      <header style={{ textAlign: 'center', marginBottom: '2rem' }}>
        <h1>AsyncAutocomplete Component Demo</h1>
        <p style={{ color: '#666' }}>
          Demonstrating all features of the AsyncAutocomplete component
        </p>
      </header>

      <main>
        <section style={{ marginBottom: '3rem' }}>
          <h2>1. Default Implementation</h2>
          <p>Standard autocomplete with default settings</p>
          <div style={{ maxWidth: '400px' }}>
            <AsyncAutocomplete />
          </div>
        </section>

        <section style={{ marginBottom: '3rem' }}>
          <h2>2. Custom Fetch Function</h2>
          <p>Using a custom data source with mock data</p>
          <div style={{ maxWidth: '400px' }}>
            <AsyncAutocomplete 
              fetchResults={mockFetchResults}
            />
          </div>
        </section>

        <section style={{ marginBottom: '3rem' }}>
          <h2>3. Custom Sorting</h2>
          <p>Results sorted by description alphabetically</p>
          <div style={{ maxWidth: '400px' }}>
            <AsyncAutocomplete 
              fetchResults={mockFetchResults}
              sortResults={sortByDescription}
            />
          </div>
        </section>

        <section style={{ marginBottom: '3rem' }}>
          <h2>4. Custom Abort Condition</h2>
          <p>Type &quot;cancel&quot; to abort the request</p>
          <div style={{ maxWidth: '400px' }}>
            <AsyncAutocomplete 
              fetchResults={mockFetchResults}
              shouldAbort={shouldCancelRequest}
            />
          </div>
        </section>

        <section style={{ marginBottom: '3rem' }}>
          <h2>5. Custom Render Option</h2>
          <p>Customized option rendering with enhanced styling</p>
          <div style={{ maxWidth: '400px' }}>
            <AsyncAutocomplete 
              fetchResults={mockFetchResults}
              renderOption={customRenderOption}
            />
          </div>
        </section>

        <section style={{ marginBottom: '3rem' }}>
          <h2>6. All Custom Features Combined</h2>
          <p>Extended debounce time (800ms) with all customizations</p>
          <div style={{ maxWidth: '400px' }}>
            <AsyncAutocomplete 
              debounceTime={800}
              fetchResults={mockFetchResults}
              sortResults={sortByDescription}
              shouldAbort={shouldCancelRequest}
              renderOption={customRenderOption}
            />
          </div>
        </section>
      </main>

      <footer style={{ 
        marginTop: '3rem', 
        paddingTop: '1rem', 
        borderTop: '1px solid #eee',
        textAlign: 'center',
        color: '#666',
        fontSize: '0.9em'
      }}>
        <p>AsyncAutocomplete Component Demo</p>
      </footer>
    </div>
  );
};

export default AutocompleteDemoPage;